<template>
  <div>
    <el-row :gutter="20" align="middle">
      <el-button
        type="primary"
        @click="add"
        icon="el-icon-circle-plus-outline"
        v-if="delegeteType =='3'"
      >新增代理商品</el-button>
      <span class="title" style="margin-left:20px">代理类型：</span>
      <el-tag
        effect="plain"
        type="success"
        style="margin-left:10px"
        v-if="delegeteTypeName !=''"
      >{{delegeteTypeName}}</el-tag>
    </el-row>
    <div style="margin-top: 10px">
      <el-table
        ref="multipleTable"
        border
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="title" label="商品名称">
          <template slot-scope="scope">
            <el-cascader
              v-model="scope.row.ids"
              :props="props"
              :show-all-levels="false"
              :options="options"
              @change="goodClick(scope.row)"
              placeholder="请选择"
              style="width:100%"
            ></el-cascader>
          </template>
        </el-table-column>
        <el-table-column prop="levelTitle" label="代理等级">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.rebaterulesId"
              placeholder="请选择"
              @visible-change="selectClick(scope.row,scope.$index)"
            >
              <el-option
                v-for="dict in scope.row.rebateRulesList"
                :key="dict.id"
                :value="dict.id"
                :label="dict.levelTitle"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100px">
          <template slot-scope="scope">
            <el-popconfirm title="确定删除此？" @onConfirm="handleClickDelete(scope.$index)">
              <el-button style="margin-left:15px" size="small" type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center; margin-top: 50px;">
      <el-button type="primary" @click="submitForm()" v-if="delegeteType =='3'">提交</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: ["data1"],
  data() {
    return {
      delegeteTypeName:"",
      delegeteType: "",
      options: [],
      tableData: [],
      goods: [],
      level: [],
      delegeteId: "",
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { value, level } = node;

          if (level == 0) {
            const nodes = this.options.map(item => ({
              value: item.label,
              label: item.value,
              leaf: level >= 1
            }));

            this.$service.firstGoods().then(res => {
              console.log(res);
              let list = res.data;
              // this.options = res;
              let arr = [];
              list.forEach(item => {
                arr.push({
                  value: item.id,
                  label: item.name,

                  leaf: level >= 2
                });
              });
              resolve(arr);
              // console.log(res.obj);
            });
          } else if (level == 1) {
            this.$service.secondGoods(node.value).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.name,
                  leaf: level >= 2
                };
              });
              resolve(nodes);
            });
          } else if (level == 2) {
            var param = {
              tbSpu: {
                cid2: node.value
              }
            };
            this.$service.getCommodityCategory(param).then(res => {
              const nodes = res.data.map(item => {
                return {
                  value: item.id,
                  label: item.title,
                  leaf: level >= 2
                };
              });
              resolve(nodes);
            });
          }
          // else if (level == 3) {
          //   this.$service.getSkus(node.value).then(res => {
          //     const nodes = res.data.map(item => {
          //       return {
          //         value: item.id,
          //         label: item.title,
          //         leaf: level >= 3
          //       };
          //     });
          //     resolve(nodes);
          //   });
          // }
          else {
            resolve([]);
          }
        }
      }
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.delegeteId = this.data1;
    this.initData();
  },
  methods: {
    goodClick(e) {
      console.log(e);
      e.levelTitle = "";
      e.rebaterulesId = "";
    },
    selectClick(scope, e) {
      var param = {
        data: {
          spuId: scope.ids[2]
        }
      };
      this.$service.tAgentGetSpuidRebateRules(param).then(res => {
        if ((res.code = "00000")) {
          this.tableData[e].rebateRulesList = res.data;
        }
      });
    },
    initData() {
      this.$service.tAgentGetCommodityDisposelist(this.delegeteId).then(res => {
        if ((res.code = "00000")) {
          this.tableData = res.data.agentUpLists;
          this.goods = res.data.spuLists;
          this.delegeteType =res.data.agent.type;
            if(this.delegeteType =='1'){
              this.delegeteTypeName ="一级全品代理";
            } else if(this.delegeteType =='2'){
               this.delegeteTypeName ="二级全品代理";
            } else if(this.delegeteType =='3'){
               this.delegeteTypeName ="非全品代理";
            }
      
        }
      });
    },
    submitForm() {
      var data = [];
      for (let i = 0; i < this.tableData.length; i++) {
        var item = this.tableData[i];
        var list = {
          spuId: item.ids[2],
          rebaterulesId: item.rebaterulesId
        };
        if (item.ids.length == 0 || item.rebaterulesId == "") {
          this.$message({
            message: "请完善代理商品",
            type: "warning"
          });
          return;
        }
        data.push(list);
      }
      var param = {
        aentId: this.delegeteId,
        agentUpList: data
      };
      console.log(param);
      this.$service.tAgentLevelUpdate(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$emit("submit");
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    handleSelectionChange() {},
    add() {
      var list = {
        title: "",
        levelTitle: "",
        spuId: "",
        ids: [],
        rebaterulesId: "",
        rebateRulesList: []
      };
      this.tableData.push(list);
    },
    handleClickDelete(e) {
      this.tableData.splice(e, 1);
    }
  },
  watch: {}
};
</script>
<style scoped>
</style>